<template>
    <div>
        <!-- <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            label="学号"
            width="300">
            <template slot-scope="scope">
                <i class="el-icon-user"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="联系方式"
            width="300">
            <template slot-scope="scope">
                <i class="el-icon-phone"></i>
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="姓名"
            width="300">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">学生信息</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">踢出课程</el-button>
            </template>
            </el-table-column>
        </el-table> -->
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-folder-add"></i>
                    <span>上传选课学生表</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1" style="height: 150px;">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-coordinate"></i>
                    <span>单独添加学生</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1" style="height: 100px;">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="学号">
                                <el-input v-model="formInline.user" placeholder="学号"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" style="margin-left: 50px;">
                                <el-input v-model="formInline.region" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-left: 100px;">
                                <el-button type="success" @click="onSubmit">确认添加</el-button>
                            </el-form-item>
                        </el-form>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
        <el-table
            :data="tableData"
            style="width: 100%; margin-left: 20px;">
            <el-table-column
            label="学号"
            width="300">
            <template slot-scope="scope">
                <i class="el-icon-user"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="联系方式"
            width="300">
            <template slot-scope="scope">
                <i class="el-icon-phone"></i>
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="姓名"
            width="300">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">学生信息</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">踢出课程</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'StudentManage',
    data() {
    return {
        formInline: {
          user: '',
          region: ''
        },
        tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '18510249859'
        }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '18510249859'
        }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '18510249859'
        }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '18510249859'
        }],
        fileList: [
        ]
    }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
    }
}
</script>

<style scoped>
    .el-menu-item.is-active {
        background-color: white !important;
    }
    .el-menu-item:hover {
        background-color: white !important;
    }
</style>